<template>
	<view class="content">
		<view v-for="(item,index) in list" :key="index">
			<view class="item">
				<view class="code">
					<text>合同编号 {{item.contract_code}}</text>
				</view>
				<view class="list status">
					<text class="name">合同状态</text>
					<text v-if="item.status==1">铁物已上传</text>
					<text v-if="item.status==2">供应商已上传</text>
					<text v-if="item.status==3">驳回</text>
					<text v-if="item.status==4">拒绝</text>
					<text v-if="item.status==5">通过</text>
					<text v-if="item.status==6">签订中</text>
					<text v-if="item.status==7">签订中</text>
					<text v-if="item.status==8">已签署</text>
					<text v-if="item.status==9">失效</text>
					<text v-if="item.status==10">拒签</text>
					<text v-if="item.status==11">作废</text>
					<text v-if="item.status==12">已推送</text>
				</view>
				<view class="list">
					<text class="name">合同名称</text>
					<text>{{item.contract_name}}</text>
				</view>
				<view class="list">
					<text class="name">合同总金额</text>
					<text>{{(item.amount*1).toFixed(2)}}</text>
				</view>
				<view class="list">
					<text class="name">合同开始时间</text>
					<text>{{item.contract_validity_start}}</text>
				</view>
				<view class="list">
					<text class="name">合同结束时间</text>
					<text>{{item.contract_validity_end}}</text>
				</view>
				<!-- <view class="list">
					<text class="name">发起签署时间</text>
					<text>{{item.initiate_start_date}}</text>
				</view>
				<view class="list" >
					<text class="name">最终签署时间</text>
					<text>{{item.initiateFinalDate}}</text>
				</view> -->
				<!-- <view class="file" v-for="(url,num) in JSON.parse()" :key="num" v-if="item.file_url.indexOf('[')>=0">
					<view class="url">
						{{url}}
					</view>
					<view class="btn" @tap="openFile(url)">
						查看合同
					</view>
				</view> -->
				<view class="file" >
					<view class="url">
						{{item.file_url}}
					</view>
				</view>
			</view>
			<view class="listbtn">
				<view class="btn" @tap="openFile(item.file_url)">
					查看合同
				</view>
				<view class="btn" @tap="reUpload(item.id)" v-if="item.status==3||item.status==4||item.status==9||item.status==10||item.status==11">
					上传合同
				</view>
			</view>
		</view>
		<!-- 筛选弹窗 -->
		<view class="popup" @tap="close" v-if="showPopup">
			<view class="box" @tap.stop="!close">
				<view class="uni-input-wrapper ipt">
					<input placeholder-class="input-style" placeholder="请输入合同编号/项目名称/收货方" v-model="search" />
					<uni-icons type="clear" size="24" color="#c0c4cc" v-if="search!=''"
						@click="search = ''"></uni-icons>
				</view>
				<!-- <uni-data-select v-model="status" :localdata="range" placeholder="请选择状态"
					style="margin-bottom: 20rpx;"></uni-data-select> -->
				<view class="uni-list-cell-db ipt">
					<picker mode="date" :value="startDate" @change="bindDateChange">
						<view class="uni-input" v-if="startDate">{{startDate}}</view>
						<view class="input-style" v-else>请选择开始日期</view>
					</picker>
					<text style="color: #999;">——</text>
					<picker mode="date" :value="endDate" @change="bindEndChange">
						<view class="uni-input" v-if="endDate">{{endDate}}</view>
						<view class="input-style" v-else>请选择结束日期</view>
					</picker>
				</view>
				<view class="btnbox">
					<view class="btn" @tap="reset">重置</view>
					<view class="btn search" @tap="tosearch">搜索</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		uploadReal,
		uploadUnloadFile
	} from '../../../network/main.js';
	import {
		contractList
	} from '../../../network/main.js';
	import {
		onShow,
		onLoad,
		onNavigationBarButtonTap
	} from '@dcloudio/uni-app';
	import uploadUrl from '../../../network/utils.js';
	import {
		ref,
		reactive
	} from 'vue';
	const list = reactive([])
	onNavigationBarButtonTap(() => {
		showPopup.value = true
	})
	onShow(() => {
		getList()
	})
	const getList = () => {
		contractList({}).then(res => {
			// let arr  = res.data.data.sort( function(a, b) {
			// 	return   new Date(b.contract_validity_start) -  new Date(a.contract_validity_start)
			// })
			Object.assign(list, res.data.data)
		})
	}
	const showPopup = ref(false)
	const range = reactive([{
			value: 0,
			text: '未签属'
		},
		{
			value: 1,
			text: '已签订'
		},
	])
	const search = ref('')
	const status = ref('')
	const close = () => {
		showPopup.value = false
	}
	const startDate = ref('')
	const bindDateChange = (e) => {
		startDate.value = e.detail.value
	}
	const endDate = ref('')
	const bindEndChange = (e) => {
		endDate.value = e.detail.value
	}
	const reset = () => {
		search.value = ''
		status.value = ''
		startDate.value = ''
		endDate.value = ''
		showPopup.value = false
		list.legnth = 0
		getList()
	}
	const tosearch = () => {
		showPopup.value = false
		list.legnth = 0
		getList()
	}
	const openFile = (url) => {
		// #ifdef  APP-PLUS
		plus.runtime.openURL(url, function(res) {});
		// #endif

		//#ifndef  APP-PLUS		
		window.open(url)
		//#endif
	}
	const reUpload = (id) => {
		uni.navigateTo({
			url: '/pages/order/upload?id=' + id
		})
	}
</script>

<style lang="scss">
	.content{
		padding-bottom: 30rpx;
	}
	.item {
		margin: 20rpx 0;
		background-color: #fff;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		position: relative;

		.code {
			font-size: 32rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #333;
			word-wrap: break-word;
		}

		.list {
			width: 100%;
			margin-top: 20rpx;
			font-size: 28rpx;
			color: #333;

			.name {
				display: inline-block;
				width: 180rpx;
				text-align: right;
				margin-right: 30rpx;
			}
		}
		.file {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
		    padding: 20rpx 0;
			.url {
				width: 100%;
				font-size: 24rpx;
				color: #f6bf00;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		
			.btn {
				width: 160rpx;
				height: 50rpx;
				border-radius: 10rpx;
				font-size: 24rpx;
				line-height: 50rpx;
				text-align: center;
				background-color: #f6bf00;
				margin: 0;
			}
		}
	}
	
	.listbtn {
		width: 100%;
		display: flex;
		justify-content: flex-end;
		padding: 0 30rpx;
		box-sizing: border-box;
		gap: 30rpx;
		margin: 30rpx 0;
		.btn {
			width: 160rpx;
			height: 50rpx;
			line-height: 50rpx;
			text-align: center;
			background-color: #ffc400;
			font-size: 24rpx;
			border-radius: 10rpx;
		}
	}
	
	

	.popup {
		width: 100%;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.5);
		position: fixed;
		top: 0;
		z-index: 999;
		transition: all .5s;

		.box {
			width: 100%;
			height: 440rpx;
			background-color: #fff;
			padding: 50rpx 30rpx;
			box-sizing: border-box;
			gap: 10rpx;
			padding-bottom: 20rpx;

			.ipt {
				height: 70rpx;
				border: 2rpx solid #e5e5e5;
				border-radius: 10rpx;
				margin-bottom: 20rpx;
				padding: 0 20rpx;
				box-sizing: border-box;
				font-size: 28rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;

				input {
					width: 700rpx;
				}
			}

			.btnbox {
				width: 100%;
				margin-top: 30rpx;
				display: flex;
				justify-content: space-around;

				.btn {
					width: 180rpx;
					height: 60rpx;
					background-color: #f8f8f8;
					line-height: 60rpx;
					text-align: center;
					border-radius: 12rpx;
					font-size: 26rpx;
				}

				.search {
					background-color: #ffc400;
				}
			}
		}
	}
</style>